<template>
	<view class="comment-content">
		<view class="task-comment-popup-note">
			<textarea placeholder="动态内容" v-model="publishData.note"></textarea>
		</view>
		<view class="cus-img-video" style="margin-left: 20upx;">
			<cus-upload-image :imgSize="200" @acquirePaths="acquirePaths" @removeImg="removeImg"></cus-upload-image>
			<cus-upload-video :src="publishData.mediaurl" @success="videoSuccess"></cus-upload-video>
		</view>
		<uni-list>
			<uni-list-item v-if="!hasWorkId" :show-extra-icon="true" :extra-icon="{type: 'settings',size: 15}" title="选择任务"
			 :show-content="true" :content="workContent" @click="showWorkPicker"></uni-list-item>
			<uni-list-item title="@ 提醒谁看" :show-content="true" :content="memberContent" @click="showMemberPicker"></uni-list-item>
		</uni-list>
		<view class="publish-btn">
			<button type="primary" @click="publishComment">发表</button>
		</view>

		<mpvue-picker ref="mpvuePickerWorkRef" :deepLength="1" @onConfirm="onWorkConfirm" :pickerValueArray="works"></mpvue-picker>

		<mpvue-picker ref="mpvuePickerMemberRef" :deepLength="1" @onConfirm="onMemberConfirm" @onCancel="onMemberCancel"
		 :pickerValueArray="members"></mpvue-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				publishData: {
					work_id: null,
					note: '',
					picture_data: [],
					hait_uid: [],
					mediaurl: ''
				},
				works: [],
				workContent: '',
				members: [],
				memberContent: '',
				hasWorkId: false,
			}
		},
		onLoad(param) {
			this.hardId = parseInt(param.hardId)
			if (param.workId) {
				this.hasWorkId = true
				this.publishData.work_id = parseInt(param.workId)
			} else {
				this.getWorks()
			}
			this.getMembers()
		},
		methods: {
			videoSuccess(path) { // 视频上传成功返回路径
				this.publishData.mediaurl = path
			},
			// 评论相关任务项
			getWorks() { // 获取任务项
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_work_list',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						hard_id: this.hardId
					},
					success: res => {
						if (res.data.code === 1) {
							this.works = res.data.data.map(item => {
								let temp = {}
								temp.label = item.name
								temp.value = item.id
								return temp
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			showWorkPicker() { // 显示 任务项 选项底部浮窗
				if (this.works.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '没有相关的任务项',
						duration: 3000
					})
					return
				}
				this.$refs.mpvuePickerWorkRef.show()
			},
			onWorkConfirm(e) { // 任务项 选项底部浮窗  确定
				this.publishData.work_id = e.value[0]
				this.workContent = e.label
			},

			// 评论相关@人员
			getMembers() { // 获取相关人员
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/app_hard_member',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						hard_id: this.hardId
					},
					success: res => {
						if (res.data.code === 1) {
							this.members = res.data.data.map(item => {
								let temp = {}
								temp.label = item.name
								temp.value = item.id
								return temp
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			showMemberPicker() { // 显示 人员 选项底部浮窗
				if (this.members.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '没有相关的人员',
						duration: 3000
					})
					return
				}
				this.$refs.mpvuePickerMemberRef.show()
			},
			onMemberConfirm(e) { // 任务项 选项底部浮窗  确定
				if (!this.publishData.hait_uid.some(item => item === e.value[0])) {
					this.publishData.hait_uid.push(parseInt(e.value[0]))
					this.memberContent = `${this.memberContent}@${e.label}`
				}
			},
			onMemberCancel(e) { // 任务项 选项底部浮窗  取消
				this.publishData.hait_uid = this.publishData.hait_uid.filter(item => item !== e.value[0])
				this.memberContent = this.memberContent.replace(`@${e.label}`, '')
			},

			acquirePaths(paths) { // 新增获取图片地址
				this.publishData.picture_data = paths
			},
			removeImg(path) { // 移出图片
				this.publishData.picture_data = this.publishData.picture_data.filter(item => item !== path)
			},
			publishComment() { // 发表评论
				if (!this.publishData.note) {
					uni.showToast({
						icon: 'none',
						title: '动态内容不能为空',
						duration: 3000
					})
					return
				}
				if(!this.publishData.work_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择任务',
						duration: 3000
					})
					return
				}
				uni.showLoading({
					title: '',
					mask: false
				});
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/create_app_work_comment',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.publishData,
					success: res => {
						if (res.data.code === 1) {
							this.publishData = {}
							this.$eventBus.$emit('projectCommentPublishExecute')
							uni.navigateBack({
								delta: 1
							})
						} else if (res.data.code === -1) {
							uni.showModal({
								title: '失败',
								content: '登录过期需要重新登录',
								showCancel: false,
								confirmText: '确定',
								success: res => {
									uni.navigateTo({
										url: '../../../pages/login/login',
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						} else {
							uni.showModal({
								title: '失败',
								content: res.data.msg,
								showCancel: false,
								confirmText: '确定',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}
						this.showPopup = false
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
	}
</script>

<style scoped>
	.comment-content {
		width: 100%;
		background-color: #FFFFFF;
		position: relative;
	}

	.task-comment-popup-note {
		padding: 40upx 20upx;
		border-radius: 10upx;
	}

	.publish-btn {
		margin-top: 60upx;
		width: 670upx;
		padding: 20upx;
	}
</style>
